
<template>
    <div class="gpu-used">
        <div class="gpu-used-left">
            <div class="card-header" style="margin-bottom:12px;">
                <span class="card-title">GPU利用率</span>
                <a-select ref="select" v-model:value="form.duration" placeholder="请选择查询时间" class="card-opt"
                    @change="selectTime">
                    <a-select-option value="15">近15分钟</a-select-option>
                    <a-select-option value="30">近30分钟</a-select-option>
                    <a-select-option value="1440">近1天</a-select-option>
                    <a-select-option value="4320">近3天</a-select-option>
                </a-select>
            </div>

            <div class="card-content" style="height:256px;">
                <div id="charts" ref="charts" style="width:100%;height:100%;"></div>
            </div>
        </div>

        <div class="gpu-used-right">
            <div class="gpu-list">
                <div class="gpu-list-header">
                    <span style="width: 60%;">显卡</span>
                    <span style="width: 40%;">使用率</span>
                </div>
                <div class="gpu-list-content">
                    <a-radio-group v-model:value="value" style="width: 100%;" @change="changeGpu">
                        <template v-for="(item, index) in data">
                            <div class="flex" style="align-items: center;">
                                <a-radio :style="radioStyle" :value="index" style="width: 60%;">
                                    <span style="display:inline-block;">Gpu{{ 1 + index }}</span>
                                </a-radio>
                                <span
                                    style="display:inline-block;width:40%;color: #223354;font-size: 14px;text-align: center;">{{
                                        (item?.gpuUse).at(-1).value || 0 }}%</span>
                            </div>
                        </template>
                    </a-radio-group>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue'
import { getGpuListApi } from '@/api/modules/api.monitoring'
import emitter from '@/utils/Bus.js'
import dayjs from 'dayjs';

const props = defineProps({
    instanceId: {
        type: Object,
        default: {}
    },
    monitorInfo: {
        type: Object,
        default: {}
    }
});

const radioStyle = ref({
    display: 'flex',
    height: '30px',
    lineHeight: '30px',
});

const form = ref({
    duration: '15'
})

const value = ref(0)

// 初始化表格
let myChart = null
const charts = ref()
function init() {
    myChart = echarts.init(charts.value);
    let option = {
        color: ['#FF2452'],
        tooltip: {
            trigger: 'axis',
        },
        grid: {
            left: '1%',
            right: '1%',
            bottom: 0,
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: gpuUseX.value,
                axisLabel: {
                    formatter: (val) => {
                        return dayjs(val).format('HH:mm');
                    },
                },
            }
        ],

        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    formatter: (val) => {
                        return val + '%';
                    },
                },
            },
        ],
        series: [
            {
                type: 'line',
                smooth: true,
                data: gpuUseY.value
            },
        ]
    };

    option && myChart.setOption(option);
}

/**
 * 页面初始化
 */
onMounted(async () => {
    await getGpuList()
    init()
});

const data = ref({})
const getGpuList = async () => {
    const params = {
        instanceId: props.instanceId,
        ...form.value
    }
    const res = await getGpuListApi(params)
    if (res.code != 0) {
        return
    }

    data.value = res.data.data || []
    selectData(0)
    emitter.emit('gpuTotal', { gpuTotal: res.data.data });
}

// 选择gpu 展示
const gpuUseX = ref([])
const gpuUseY = ref([])
const selectData = (index) => {
    gpuUseX.value = (data.value[index]?.gpuUse)?.map(item => {
        return item.totalTime
    })

    gpuUseY.value = (data.value[index]?.gpuUse)?.map(item => {
        return item.value
    })
}

const changeGpu = (e) => {
    selectData(e.target.value)
}

const selectTime = async () => {
    await getGpuList()
    init()
}

</script>

<style scoped lang="scss">
.gpu-used {
    display: flex;

    .gpu-used-left {
        flex: 1;
    }

    .gpu-used-right {
        width: 140px;
        margin-left: 16px;
    }
}

.card-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;

    .card-title {
        font-weight: 550;
        color: #223354;
        margin-right: 20px;
    }

    .card-opt {
        margin-left: auto;
    }
}

.card-info-wrap {
    .card-info {
        color: #8A93A7;
        font-family: PingFang SC;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin-right: 40px;
    }

    .num {
        color: #3F73F6;
        font-family: PingFang SC;
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }
}

.card-content {
    display: flex;
}

.gpu-list {
    background: #F5F8FF;
    padding: 8px;

    .gpu-list-header {
        span {
            display: inline-block;
            text-align: center;
        }
    }
}
</style>
